<template>
    <L7Map map-id="my-map" @loaded="handleLoaded" :options="options"></L7Map>
</template>

<script setup lang="ts">
import { Scene, PointLayer, LayerSwitch, Swipe } from '@antv/l7'

const options: any = ref({
    center: [88.6, 36.9],
    zoom: 1.5,
    pitch: 2
})
const handleLoaded = async (scene: Scene) => {
    // csv

    // 渲染成动态点
    const data = await fetch('/csv/launch_sites.csv').then(res => res.text())
    const pointLayer = new PointLayer({ name: '点_动效' })
        .source(data, {
            parser: {
                type: 'csv',
                x: 'Longitude',
                y: 'Latitude',
            },
        })
        .shape('circle')
        .active(true)
        .animate(true)
        .size('FullName', [40, 45, 50, 55, 60])
        .color('FullName', ['#007bff', '#6610f2', '#6d49cb', '#e83e8c', '#dc3545', '#fd7e14', '#ffc107', '#28a745', '#20c997', '#17a2b8', '#ab6100', '#dd2b0e'])
        .style({
            raisingHeight: 30  // 抬升高度 
        })

    // 点渲染为对应字段的文字
    const pointTextLayer = new PointLayer({ name: '点_文字' })
        .source(data, {
            parser: {
                type: 'csv',
                x: 'Longitude',
                y: 'Latitude',
            },
        })
        .shape('FullName', 'text')
        .active({ color: 'yellow' })
        .size(12)
        .color('#006dff')
        .style({
            raisingHeight: 600,  // 好像没效果..
            // fontWeight: 800,
            // padding: 4,
            spacing: 1,
            // stroke: 'pink',
            strokeWidth: 1,
            // offset:[20,-20]
        })


    // 点渲染为不同的形状颜色
    const pointShapeLayer = new PointLayer({ name: '点_形状_颜色' })
        .source(data, {
            parser: {
                type: 'csv',
                x: 'Longitude',
                y: 'Latitude',
            },
        })
        .shape('FullName', [
            'circle',
            'triangle',
            'square',
            'pentagon',
            'hexagon',
            'octogon',
            'hexagram',
            'rhombus',
            'vesica',
        ])
        .active(true)
        .size(16)
        .color('FullName', ['#007bff', '#6610f2', '#6d49cb', '#e83e8c', '#dc3545', '#fd7e14', '#ffc107', '#28a745', '#20c997', '#17a2b8', '#ab6100', '#dd2b0e'])
        .style({
            raisingHeight: 60,
            opacity: 0.7,
            // rotation: 90,
            stroke: '#fff',
            strokeWidth: 2,
            blur: 0.1
        })

    // 点渲染为雷达
    const pointRadarLayer = new PointLayer({ name: '点_雷达' })
        .source(data, {
            parser: {
                type: 'csv',
                x: 'Longitude',
                y: 'Latitude',
            },
        })
        .shape('radar')
        .active(true)
        .animate(true)  //雷达图需设置animate(true) 
        .size('FullName', [20, 25, 30, 35, 40])
        .color('FullName', ['#007bff', '#6610f2', '#6d49cb', '#e83e8c', '#dc3545', '#fd7e14', '#ffc107', '#28a745', '#20c997', '#17a2b8', '#ab6100', '#dd2b0e'])
        .style({
            opacity: 1,
            speed: 6
        })

    scene.addLayer(pointRadarLayer);
    scene.addLayer(pointLayer);
    scene.addLayer(pointTextLayer)
    scene.addLayer(pointShapeLayer);

    let layerSwitch: LayerSwitch = new LayerSwitch({
        multiple: true,
    });
    scene.addControl(layerSwitch)

    const swipe: Swipe = new Swipe({
        layers: [pointLayer, pointShapeLayer],
        rightLayers: [pointRadarLayer, pointTextLayer,]
    })
    scene.addControl(swipe)

}
</script>